<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弧度</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600">当前浏览器不支持canvas,请升级浏览器</canvas>
	<script type="text/javascript">
		var canvas = document.getElementById('canvas');
		canvas.style.border = '1px solid #aaa';
		canvas.style.display = 'block';
		canvas.style.margin = '0 auto';
		var context = canvas.getContext('2d');

		context.strokeStyle = '#005588';
		context.lineWidth = 3;

		for(var i = 0; i < 10; i++) {
			context.beginPath();
            var x = 50 + 50 * i;
			var y = 50;
			var r = 20;
			context.arc( x, y, r, 0, (0.2+0.2*i)*Math.PI);
			context.closePath();
            context.stroke();
		}

        for(var i = 0; i < 10; i++) {
            context.beginPath();
            var x = 50 + 50 * i;
            var y = 100;
            var r = 20;
            context.arc( x, y, r, 0, (0.2 + 0.2 * i)*Math.PI);
            context.stroke();
        }

        for(var i = 0; i < 10; i++) {
            context.beginPath();
            var x = 50 + 50 * i;
            var y = 150;
            var r = 20;
            context.arc(x, y, r, 0, (0.2 + 0.2 * i) * Math.PI, true);
            context.stroke();
        }


        for(var i = 0; i < 10; i++) {
            context.beginPath();
            var x = 50 + 50 * i;
            var y = 200;
            var r = 20;
            context.arc(x, y, r, 0, (0.2 + 0.2 * i)*Math.PI);
            context.fillStyle = 'red';
            context.fill();
        }
    </script>
</body>
</html>